
Vue.prototype.$http = axios;
new Vue({
    el:'.x_content',
    data:{
        isShow:true,//判断手机注册和邮箱注册的显示与隐藏
        //==============手机号注册
        bool:[0,0,0,0,0],
        inp1:"",//判读手机号
        inp2:"",//判断验证码
        inp3:"",//判断密码,
        inp33:"",//判断密码强度
        inp4:"",//判断密码重复,
        inp5:"",
        btn:false,
        btnInfo:'获取验证码',
        //=============邮箱注册
        list:[0,0,0,0,0,0],
        arr1:"",//判读手机号
        arr2:"",//判断验证码
        arr3:"",//判断密码,
        arr33:"",//判断密码强度
        arr4:"",//判断密码重复,
        arr5:"",//判断阅读条款
        arr6:"",//判断邮箱是否正确
        listBtn:false,
        listInfo:'获取验证码',
    },
    methods:{
        /*==========手机号注册=============*/
        //发送验证码
        send(){
            this.btn = false;
            var num = 60;
            var time =  setInterval(function(){
                num--;
                if(num==0){
                    clearInterval(time);
                    this.btn = true;
                    this.btnInfo ='获取验证码';
                }else{
                    this.btnInfo = num+'秒后重新获取';
                }
            }.bind(this),1000)
        },
        //控制选中状态的显示与隐藏
        termShow(){
            this.$set(this.bool,4,0);
            //this.$set(this.$data,'inp5','接受服务条款才能注册')
            this.inp5 = '接受服务条款才能注册';
        },
        termHide(){
            this.$set(this.bool,4,1);
            this.inp5 = '';
        },
        //判断手机号是否真确
        inp1Blur(e){
            var reg = /^1[3|4|5|7|8][0-9]{9}$/;
            if($(e.target).val()==''){
                this.inp1 = '手机号码不能为空';
                this.btn = false;
            }else if(!reg.test($(e.target).val())){
                this.inp1 = '请输入正确的手机号码';
                this.btn = false;
            }else{
                this.inp1 = '';
                this.btn = true;
            }
            this.$set(this.bool,0,1);
        },
        inp1Put(){
            this.inp1 = '';
            this.$set(this.bool,0,0);
        },
        //判断验证码是否正确
        inp2Blur(e){
            var reg = /^[0-9]{6}$/;
            if(reg.test($(e.target).val())){
                this.inp2 = '';
            }else{
                this.inp2 = '请输入6位数字手机验证码';
            }
            this.$set(this.bool,1,1);
        },
        inp2Put(){
            this.inp2 = '';
            this.$set(this.bool,1,0);
        },
        //判断密码是否符合
        inp3Blur(e){
            if($(e.target).val().length>5&&$(e.target).val().length<21){
                var pwdValue = $(e.target).val();
                var lvl = 0;
                if(pwdValue.match(/\d/)){
                    lvl++;
                }
                if(pwdValue.match(/[a-zA-Z]/)){
                    lvl++;
                }
                if(pwdValue.match(/[^0-9a-zA-Z]/)){
                    lvl++;
                }
                if(pwdValue.match(/[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/)){
                    lvl++;
                }
                if(pwdValue.match(/[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/)){
                    lvl++;
                }
                if(lvl<=1){
                    $(e.target).next().css('color','#F54949');
                    this.inp33 = '密码强度为：弱';
                }else if(lvl<=2){
                    $(e.target).next().css('color','#F8A123');
                    this.inp33 = '密码强度为：中';
                }else{
                    $(e.target).next().css('color','#49B05B');
                    this.inp33 = '密码强度为：强';
                }
                this.inp3 = '';
            }else if($(e.target).val()==''){
                $(e.target).next().css('color','#F67173');
                this.inp3 = '密码不能为空';
            }else{
                $(e.target).next().css('color','#F67173');
                this.inp3 = '请输入6-20位密码';
            }
            this.$set(this.bool,2,1);
        },
        inp3Put(){
            this.inp3 = '';
            this.inp33 = '';
            this.$set(this.bool,2,0);
        },
        //判断二次密码是否符合
        inp4Blur(e){
            if($(e.target).val() == $(e.target).parent().prev().children('input').val()&&$(e.target).val() != ''){
                this.inp4 = '';
            }else if($(e.target).val() == ''){
                this.inp4 = '请输入确认密码';
            }else{
                this.inp4 = '两次输入的密码不一致，请重试';
            }
            this.$set(this.bool,3,1);

        },
        inp4Put(){
            this.inp4 = '';
            this.$set(this.bool,3,0);
        },
        //立即注册
        register(){
            if(this.bool[0]&&this.inp1==''&&this.bool[2]&&this.inp3==''&&this.bool[3]&&this.inp4==''&&this.bool[4]){

                //alert('注册成功');
                this.$http({
                    method:'post',
                    url:'/register',
                    data:{
                        phone:$('.inp').eq(0).val(),
                        pwd:$('.inp').eq(2).val(),
                        email:""
                    }
                }).then((res)=>{
                    if(res.data.msg){
                        if(res.data.msg==2){
                            alert('用户名已存在！');
                            location.reload();
                        }else{
                            alert('注册成功');
                            window.location.href='login.html';
                        }
                    }else{
                        alert('服务器出现异常！');
                        location.reload();
                    }
                })
            }else{

                if(!$('.inp').eq(0).val()){
                    this.inp1 = '手机号码不能为空';
                    this.btn = false;
                    this.$set(this.bool,0,1);
                }
                if(!$('.inp').eq(2).val()){
                    this.inp3 = '密码不能为空';
                    this.$set(this.bool,2,1);
                }
                if(!$('.inp').eq(3).val()){
                    this.inp4 = '请输入确认密码';
                    this.$set(this.bool,3,1);
                }
                if(!this.bool[4]){
                    this.inp5 = '接受服务条款才能注册';
                    this.$set(this.bool,4,0);
                }


            }
        },
        /*===================邮箱注册====================*/
        //发送验证码
        emSend(){
            this.listBtn = false;
            var num = 60;
            var time =  setInterval(function(){
                num--;
                if(num==0){
                    clearInterval(time);
                    this.listBtn = true;
                    this.listInfo ='获取验证码';
                }else{
                    this.listInfo = num+'秒后重新获取';
                }
            }.bind(this),1000)
        },
        //控制选中状态的显示与隐藏
        emailShow(){
            this.$set(this.list,4,0);
            //this.$set(this.$data,'inp5','接受服务条款才能注册')
            this.arr5 = '接受服务条款才能注册';
        },
        emailHide(){
            this.$set(this.list,4,1);
            this.arr5 = '';
        },
        //判断手机号是否真确
        arr1Blur(e){
            var reg = /^1[3|4|5|7|8][0-9]{9}$/;
            if($(e.target).val()==''){
                this.arr1 = '手机号码不能为空';
                this.listBtn = false;
            }else if(!reg.test($(e.target).val())){
                this.arr1 = '请输入正确的手机号码';
                this.listBtn = false;
            }else{
                this.arr1 = '';
                this.listBtn = true;
            }
            this.$set(this.list,0,1);
        },
        arr1Put(){
            this.arr1 = '';
            this.$set(this.list,0,0);
        },
        //判断验证码是否正确
        arr2Blur(e){
            var reg = /^[0-9]{6}$/;
            if(reg.test($(e.target).val())){
                this.arr2 = '';
            }else{
                this.arr2 = '请输入6位数字手机验证码';
            }
            this.$set(this.list,1,1);
        },
        arr2Put(){
            this.arr2 = '';
            this.$set(this.list,1,0);
        },
        //判断密码是否符合
        arr3Blur(e){
            if($(e.target).val().length>5&&$(e.target).val().length<21){
                //this.inp3 = '';
                var pwdValue = $(e.target).val();
                var lvl = 0;
                if(pwdValue.match(/\d/)){
                    lvl++;
                }
                if(pwdValue.match(/[a-zA-Z]/)){
                    lvl++;
                }
                if(pwdValue.match(/[^0-9a-zA-Z]/)){
                    lvl++;
                }
                if(pwdValue.match(/[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/)){
                    lvl++;
                }
                if(pwdValue.match(/[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/)){
                    lvl++;
                }
                if(lvl<=1){
                    $(e.target).next().css('color','#F54949');
                    this.arr33 = '密码强度为：弱';
                }else if(lvl<=2){
                    $(e.target).next().css('color','#F8A123');
                    this.arr33 = '密码强度为：中';
                }else{
                    $(e.target).next().css('color','#49B05B');
                    this.arr33 = '密码强度为：强';
                }
                this.arr3 = '';
            }else if($(e.target).val()==''){
                $(e.target).next().css('color','#F67173');
                this.arr3 = '密码不能为空';
            }else{
                $(e.target).next().css('color','#F67173');
                this.arr3 = '请输入6-20位密码';
            }
            this.$set(this.list,2,1);
        },
        arr3Put(){
            this.arr3 = '';
            this.arr33 = '';
            this.$set(this.list,2,0);
        },
        //判断二次密码是否符合
        arr4Blur(e){
            if($(e.target).val() == $(e.target).parent().prev().children('input').val()&&$(e.target).val() != ''){
                this.arr4 = '';
            }else if($(e.target).val() == ''){
                this.arr4 = '请输入确认密码';
            }else{
                this.arr4 = '两次输入的密码不一致，请重试';
            }
            this.$set(this.list,3,1);

        },
        arr4Put(){
            this.arr4 = '';
            this.$set(this.list,3,0);
        },
        //邮箱验证
        arr6Blur(e){
            var reg  = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
            if(reg.test($(e.target).val())){
                this.arr6 = '';
            }else if($(e.target).val() == ''){
                this.arr6 = '邮箱不能为空';
            }else{
                this.arr6 = '请输入正确的邮箱账号';
            }
            this.$set(this.list,5,1);
        },
        arr6Put(){
            this.arr6 = '';
            this.$set(this.list,5,0);
        },
        //立即注册
        emRegister(){
            if(this.list[5]&&this.arr6==''&&this.list[0]&&this.arr1==''&&this.list[2]&&this.arr3==''&&this.list[3]&&this.arr4==''&&this.list[4]){
                //alert('注册成功');
                this.$http({
                    method:"post",
                    url:'/register',
                    data:{
                        email:$('.x_email .inp').eq(0).val(),
                        pwd:$('.x_email .inp').eq(1).val(),
                        phone:$('.x_email .inp').eq(3).val()
                    }
                }).then((res)=>{

                    if(res.data.msg){
                        if(res.data.msg==2){
                            alert('用户名已存在！');
                            location.reload();
                        }else{
                            alert('注册成功');
                            window.location.href='login.html';
                        }
                    }else{
                        alert('服务器出现异常！');
                        location.reload();
                    }
                })
            }else{
                if(!$('.x_email .inp').eq(0).val()){
                    this.arr6 = '邮箱不能为空';
                    this.$set(this.list,5,1);
                }
                if(!$('.x_email .inp').eq(1).val()){
                    this.arr3 = '密码不能为空';
                    this.$set(this.list,2,1);
                }
                if(!$('.x_email .inp').eq(2).val()){
                    this.arr4 = '请输入确认密码';
                    this.$set(this.list,3,1);
                }
                if(!$('.x_email .inp').eq(3).val()){
                    this.arr1 = '手机号码不能为空';
                    this.listBtn = false;
                    this.$set(this.list,0,1);
                }
                if(!this.list[4]){
                    this.$set(this.list,4,0);
                    this.arr5 = '接受服务条款才能注册';
                }
            }
        }
    }
})